import { Input } from "antd"
import { forwardRef, Ref, useImperativeHandle, useState } from "react"

// import { Select } from "antd"
import { SFormItem } from "@/components/common"
import ComplexInput from "@/components/common/complexInput"
import { useLocale } from "@/locales"
// import dynamicComponent from "./dynamicImport"

const ComplexUsernameIP = (props: any, ref: Ref<unknown> | undefined) => {
	const { options } = props
	const { newFormat } = useLocale()
	const optionsShow = options || [
		{
			label: newFormat("common.updateBy"),
			value: "optUsername"
		},
		{
			label: newFormat("common.updateByIP"),
			value: "optIp"
		}
	]
	const [field, setField] = useState(optionsShow[0].value)
	const maxLength = optionsShow.find((item: any) => item.value === field)?.maxLength ?? undefined
	useImperativeHandle(ref, () => {
		return {
			setField
		}
	})

	return (
		<ComplexInput options={optionsShow} value={field} onTypeChange={setField}>
			<SFormItem name={field}>
				<Input placeholder={newFormat({ id: "label.please_input" })} maxLength={maxLength} />
			</SFormItem>
		</ComplexInput>
	)
}

export default forwardRef(ComplexUsernameIP)
